<ng-container *ngIf="!item.hidden">

    <!-- 导航展开 -->
    <ng-container *ngIf="!notaddConfig.layout.navbar.collapsed">
        <div (click)="toggleCollapse($event)"
             class="nav-link"
             [ngClass]="item.classes"
             matRipple>
            <ng-container *ngTemplateOutlet="itemContent"></ng-container>
        </div>

        <div class="children" [@slideInOut]="isCollapsed">
            <ng-container *ngFor="let item of item.children">
                <notadd-nav-item *ngIf="item.type=='item'" [item]="item"></notadd-nav-item>
                <notadd-nav-collapse *ngIf="item.type=='collapse'" [item]="item"></notadd-nav-collapse>
                <notadd-nav-group *ngIf="item.type=='group'" [item]="item"></notadd-nav-group>
            </ng-container>
        </div>
    </ng-container>

    <!-- 导航折叠 -->
    <ng-container *ngIf="notaddConfig.layout.navbar.collapsed">
        <div class="nav-link nav-collapsed"
             [matMenuTriggerFor]="navMenu"
             [matMenuTriggerData]="{items: item.children}"
             #menuTrigger="matMenuTrigger"
             (mouseenter)="item.children.length && openNavMenu($event);"
             (mouseleave)="item.children.length && closeNavMenu($event);">
            <ng-container *ngTemplateOutlet="itemContent"></ng-container>
        </div>

        <mat-menu class="nav-menu" #navMenu="matMenu" yPosition="above" hasBackdrop="false">
            <div (mouseenter)="isEnterNavMenu = true" (mouseleave)="isEnterNavMenu = false; closeNavMenu($event);">
                <ng-template matMenuContent let-items="items">
                    <ng-container *ngFor="let item of items">
                        <button *ngIf="item.children"
                                mat-menu-item
                                [matMenuTriggerFor]="subMenu"
                                (mouseenter)="setSubMenu(item);">{{item.i18n | translate}}</button>

                        <button *ngIf="!item.children"
                                mat-menu-item
                                [routerLink]="[item.url | path: item.urlParam]"
                                [routerLinkActive]="['active', 'mat-accent-bg']"
                                matRipple>{{item.i18n | translate}}</button>
                    </ng-container>
                </ng-template>
            </div>
        </mat-menu>
        <mat-menu #subMenu="matMenu" hasBackdrop="false">
            <div (mouseenter)="isEnterNavMenu = true" (mouseleave)="isEnterNavMenu = false; closeNavMenu($event);">
                <ng-template matMenuContent>
                    <button mat-menu-item
                            *ngFor="let subItem of subMenus"
                            [routerLink]="[subItem.url | path: subItem.urlParam]"
                            [routerLinkActive]="['active', 'mat-accent-bg']"
                            matRipple>
                        {{subItem.i18n | translate}}
                    </button>
                </ng-template>
            </div>
        </mat-menu>
    </ng-container>

    <ng-template #itemContent>
        <mat-icon class="nav-link-icon" *ngIf="item.icon">{{item.icon}}</mat-icon>
        <span class="nav-link-title" [translate]="item.i18n"></span>
        <span class="nav-link-badge" *ngIf="item.badge"
              [ngStyle]="{'background-color': item.badge.bg,'color': item.badge.fg}">
            {{item.badge.title}}
        </span>
        <mat-icon class="collapsed-arrow">keyboard_arrow_right</mat-icon>
    </ng-template>

</ng-container>
